<template>
  <!-- <template #item="{ item }">
    <DrawingResult :value="item" :status="item?.status" />
  </template> -->
  <div class="h-full">
    <el-scrollbar class="flex-1 min-h-0">
      <div class="pb-[20px] flex flex-wrap" v-if="pager.count > 0">
        <template v-for="(item, index) in pager.lists" :key="index">
          <DrawingResult :value="item" />
        </template>
      </div>
      <!--  空状态  -->
      <div v-else class="h-full pt-[200px]">
        <el-result>
          <template #icon>
            <el-image :src="DrawingEmpty" />
          </template>
          <!-- <template #title>
                        <div class="text-xl">
                            当前任务是空的哦
                        </div>
                    </template>
                    <template #sub-title>
                        <div class="text-info">
                            在左侧输入描述，创建你的作品吧!
                        </div>
                    </template> -->
        </el-result>
      </div>
    </el-scrollbar>
    <div
      v-if="pager.count > 0"
      class="flex justify-end items-center pt-[15px] mr-[30px]"
    >
      <pagination v-model="pager" @change="getListsFunc" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { mydrawList } from "~/api/user";
import { usePaging } from "~/composables/usePaging";
import DrawingEmpty from "~/assets/images/drawing/drawing_empty.png";
import DrawingResult from "./drawing-result/index.vue";
const props = withDefaults(
  defineProps<{
    state?: any;
  }>(),
  {
    state: 1,
  }
);

const { pager, getLists } = usePaging({
  fetchFun: mydrawList,
  params: props,
});

watch(
  () => props.state,
  async (val) => {
    if (val) {
      getLists();
    }
  },
  { immediate: true }
);
</script>
